<template>
  <div class="physical-room-listing">
    <div class="row">
      <div class="col-md-12 p-0">
        <!-- <filter-form v-if="filters.length" :columns="filters" @submit="submit"></filter-form> -->
        <!-- 查询条件表单  CODE START  -->
        <el-form :inline="true" :model="querPars" class="demo-form-inline">
          <el-row>
            <el-col :span="24">
              <el-form-item >
                <el-input placeholder="Please Enter Room PID" v-model="querPars.order__logical_room__physical_room__physical_room_id" clearable>
                  <el-button slot="append" icon="el-icon-search" @click="loadData"></el-button>
                </el-input>
              </el-form-item>

              <el-form-item >
                <el-input placeholder="Please Enter Reservation Code" v-model="querPars.order__reservation_code" clearable>
                  <el-button slot="append" icon="el-icon-search" @click="loadData"></el-button>
                </el-input>
              </el-form-item>

              <el-select v-model="querPars.submitted" clearable placeholder="Please select Submitted" @change="loadData">
                <el-option  label="Yes" value="true"></el-option>
                <el-option  label="No" value="false"></el-option>
              </el-select>

              <el-date-picker
                v-model="querPars.order__checkout"
                type="date"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                placeholder="Select Order Checkout"
                @change="loadData"
              >
              </el-date-picker>

              <el-form-item label="Overall Rating:" style="margin-left: 20px;">
                <el-rate style=" margin-top: 10px;"
                         v-model="querPars.overall_rating"
                         text-color="#ff9900"
                         @change="queryRateChange"
                >
                </el-rate>
              </el-form-item>

              <el-form-item>
                <el-button type="primary" @click="doRefresh">Refresh</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
    <div class="row">
      <div class="col-md-12 bg-white p-0 m-0">
        <item-table title="Funkey PhysicalRoomReviews List" :columns="defaultColumns" :data="data" :loading="tableLoading" @sort="sort"
                    :total="total" :model="model" isColumns  isExport @export="exportExcel"
        >
          <template slot="related_order.platform" slot-scope="props">
            <div class="col-site">
              <img  src="/static/img/airbnb.jpg" v-if="(props.item.related_order.platform == 'airbnb' || props.item.related_order.platform == 'airbnb_api')"/>
              <img  src="/static/img/xiaozhu.png" v-else-if="props.item.related_order.platform == 'xiaozhu'"/>
              <strong v-else>{{props.item.related_order.platform}}</strong>
            </div>
          </template>

          <template slot="related_order.checkout" slot-scope="props">
            <div class="col-site">
              {{props.item.related_order.checkout}}
            </div>
          </template>

          <template slot="related_order.logical_room__physical_room_id" slot-scope="props">
            <div class="col-attribution">
              <img :src="displayImg(props.item)"/>
              <div class="attribution-pid">PID:{{props.item.related_order.logical_room__physical_room_id}}</div>
              <div class="attribution-reservation-code">{{props.item.related_order.reservation_code}}</div>
            </div>
          </template>

          <template slot="the_other_review.overall_rating" slot-scope="props">
            <div class="col-site"  v-if="null != props.item.the_other_review && props.item.the_other_review.overall_rating > 0">
              <el-rate
                v-model="props.item.the_other_review.overall_rating"
                disabled
                text-color="#ff9900">
              </el-rate>
            </div>
            <div class="col-site" style="background-color: #F6F6F6;" v-else>
              <strong style="font-size: 16px;">No Rating</strong>
            </div>
          </template>

          <template slot="the_other_review.public_review" slot-scope="props">
            <div class="col-review" v-if="null != props.item.the_other_review && props.item.the_other_review.public_review" >
                <div>
                  <h5 style="top:0px;">{{props.item.related_order.guest_name}}</h5>
                  <a class="review-reply" href="javascript:void(0)" @click="doShowReply(props.item)">Reply to this review</a>
                  <strong :title="props.item.the_other_review.public_review">
                    {{(props.item.the_other_review && props.item.the_other_review.public_review) ? props.item.the_other_review.public_review : 'No Content...'}}
                  </strong>
                  <p class="reviewee-response" v-if="props.item.reviewee_response">
                    <span :title="props.item.reviewee_response">{{props.item.reviewee_response}}</span>
                    <strong>Reply:[{{props.item.operator}}] </strong>
                  </p>
                </div>

                <div>
                  <h5 style="top:0px;">{{props.item.operator}}</h5>
                  <h5 style="top:0px;right:50px;">{{props.item.first_completed_at ?'('+props.item.first_completed_at+')' : ''}}</h5>
                  <!--<a  style="top:8px;" class="review-reply" href="javascript:void(0)">More</a> -->
                  <p class="review-role" :title="props.item.public_review">
                    {{(props.item.public_review) ? props.item.public_review : 'No Reply Content...'}}
                  </p>
                </div>
              </div>
              <div style="margin-top: 10%" v-else>
                This guest has not commented yet.
              </div>
            </template>


            <template slot="has_invited" slot-scope="props">
              <el-row style="width:190px;">
                <el-col :span="11">
                  <el-button type="primary" class="col-status-button"  @click="doShowReview(props.item)" :disabled="props.item.public_review !=''">
                    <i class="el-icon-time el-icon--top"  style="font-size: 20px;"></i><br/>
                    <span style="font-size: 10px;margin-top: 5px;">COMMENT</span>
                  </el-button>
                  <div class="col-status-desc">Uncommented</div>
                  <div style="text-align: center;">
                    <i class="el-icon-circle-check  col-status-yes" v-if="props.item.public_review"></i>
                    <i class="el-icon-circle-close col-status-no" v-else></i>
                  </div>
                </el-col>
                <el-col :span="1">&nbsp;</el-col>
                <el-col :span="12" style="text-align: center">
                  <router-link :to="`/chat/all?search=${props.item.related_chat_id}`" >
                  <el-button type="primary" class="col-status-button" style="width: 110px;" @click="doOpenChat(props.item)">
                    <i class="el-icon-s-promotion el-icon--top"  style="font-size: 20px;"></i><br/>
                    <span style="font-size: 10px;margin-top: 5px;">Request Review</span>
                  </el-button>
                  </router-link>
                  <div class="col-status-desc">Requested</div>
                  <div style="text-align: center;">
                    <i class="el-icon-circle-check  col-status-yes" v-if="props.item.has_invited"></i>
                    <i class="el-icon-circle-close col-status-no" v-else></i>
                  </div>
                </el-col>
              </el-row>

            </template>
          </item-table>
          <v-paginate :pageCount="pageCount" :page="page" @change="changePage"></v-paginate>
        </div>
      </div>
      <!--******  评价弹窗 ****-->
    <el-dialog title="Pate & Review" :visible.sync="reviewsVisible" width="38%" >
      <el-form ref="reviewsForm" :model="reviewsForm" :rules="reviewsRule"  label-position="top"  v-loading="reviewsFormLoading" class="dilog-cls">
        <el-row class="dilog-cls">
          <el-col :span="8" class="dilog-cls">
            <div class="order-info">
              <img class="order-info-house" :src="currentData.hoursePic"/><!-- src="/static/img/cat.png" -->
              <div class="order-info-row">
                <div class="order-info-col1">
                  <img class="order-info-platform"  :src="currentData.platformPic"/>
                </div>
                <div class="order-info-col2">
                  <div class="order-info-title">{{currentData.title}}</div><!--日本东京位置最好环境最优民宿-->
                  <div class="order-info-price">
                    <strong class="guest-name">{{currentData.guestName}}<!--程明强--></strong><strong class="total-price">{{currentData.totalPrice}}<!--3000--><label>{{currentData.currency}}<!--JPY--></label></strong>
                  </div>
                </div>
              </div>
            </div>
          </el-col>
          <el-col :span="16">
            <div>
              <h3>Describe Your Experience(required)</h3>
              <label> Your review will be public on your guest's profile.</label>
            </div>
            <el-form-item prop="public_review">
              <el-input
                type="textarea"
                :autosize="{ minRows: 4, maxRows: 10}"
                placeholder="What was it like to host this guest?"
                maxlength="500"
                v-model="reviewsForm.public_review">
              </el-input>
            </el-form-item>

            <div>
              <h3>Private Guest Feedback</h3>
              <label>This feedback is just for your guest. We won't make it public.</label>
            </div>
            <el-form-item prop="private_feedback">
              <el-input
                type="textarea"
                :autosize="{ minRows: 4, maxRows: 10}"
                placeholder="Thank your guest for visiting or offer some tips to help them improve for their next trip."
                maxlength="500"
                v-model="reviewsForm.private_feedback">
              </el-input>
            </el-form-item>

            <div>
              <h3>Cleanliness</h3>
              <label>Did the guest leave your space clean?</label>
            </div>
            <el-form-item prop="cleanliness">
              <el-rate v-model="reviewsForm.cleanliness"></el-rate>
            </el-form-item>

            <div>
              <h3>Communication</h3>
              <label>How clearly did the guest communicate their plans,questions, and concerns?</label>
            </div>
            <el-form-item prop="communication">
              <el-rate v-model="reviewsForm.communication"></el-rate>
            </el-form-item>

            <div>
              <h3>Observance of House Rules</h3>
              <label>Did the guest observe the house rules you provided?</label>
            </div>
            <el-form-item prop="respect_house_rules">
              <el-rate v-model="reviewsForm.respect_house_rules"></el-rate>
            </el-form-item>

            <div ref="lbl_is_reviewee_recommended" :class="{'requireded': requiredRecomended}">
              <h3>Would you recommend this guest? </h3>
              <label>Your answer will not be posted on your profile or your giest's profile.</label>
            </div>
            <el-form-item prop="is_reviewee_recommended">
              <el-radio-group v-model="reviewsForm.is_reviewee_recommendedTag" @change="rdoChange">
                <el-radio-button label="No"></el-radio-button>
                <el-radio-button label="Yes"></el-radio-button>
              </el-radio-group>
            </el-form-item>

            <el-form-item style="text-align: center;">
              <el-button type="danger" round @click="doReviewSubmit">Submit</el-button>
              <el-button round @click="doClose">Close</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>

    <!--******  房东二次回复客人弹窗 ****-->
    <el-dialog :visible.sync="replyVisible" width="38%" >
      <el-form ref="replyForm" :model="replyForm" :rules="replyRule"  label-position="top"  v-loading="replyFormLoading">
        <div>
          <h3>Public response</h3>
          <label>Your response will appear on your listing and profile.</label>
        </div>
        <el-form-item prop="reviewee_response">
          <el-input
            type="textarea"
            :autosize="{ minRows: 3, maxRows:6}"
            placeholder="Reply to this review..."
            maxlength="200"
            v-model="replyForm.reviewee_response">
          </el-input>
        </el-form-item>
        <el-form-item style="text-align: center;">
          <el-button type="danger" round @click="doReplySubmit">Submit</el-button>
          <el-button round @click="doReplyClose">Close</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
  // components
  import vSelect from 'vue-select'
  import vPaginate from '@/components/widgets/Pagination'
  import ItemTable from '@/components/widgets/ItemTable'
  import ItemDetail from '@/components/widgets/ItemDetail'
  import FilterForm from '@/components/widgets/FilterForm'
  // mixin
  import {lifeHookMixin, itemMixin} from '@/mixins/item'
  import Vue from 'vue'
  import ElementUI from 'element-ui';
  import 'element-ui/lib/theme-chalk/index.css';
  import {addModel,searchModel,get,updateModel,deleteModel,addModels,updateModels} from "@/api/model";
  import {submitAction} from '@/api/task'

  export default {
    name: "PhysicalRoomReviews",
    components: {vSelect, vPaginate, ItemTable, ItemDetail, FilterForm},
    mixins: [lifeHookMixin, itemMixin],
    data(){
      return {
          querPars:{
            rateChanged:false,
            submitted:null,
            overall_rating:null,
            order__checkout:null,
            order__logical_room__physical_room__physical_room_id:null,
            order__reservation_code:null
          },
          /**--- 创建评价相关 CODE START ---**/
          currentData:{},
          requiredRecomended:false,
          reviewsVisible: false,
          reviewsFormLoading: false,
          reviewsForm:this.getInitFormData(),
          reviewsRule:this.getInitRules(),
          /**--- 创建评价相关 CODE END ---**/

          /**--- 回复弹窗相关 CODE START ---**/
          replyVisible: false,
          replyFormLoading: false,
          replyForm:{
              id: null,
              reviewee_response:null
          },
          replyRule:{
              reviewee_response: [
                  { required: true, message: 'Reply to this review...', trigger: 'blur' },
                  { min: 1, max: 200, message: '1 to 200 characters in length', trigger: 'blur' }
              ]
          },
          /**--- 回复弹窗相关 CODE END ---**/
      };
    },
    created() {
      // model
      this.model = 'PhysicalRoomReviews';
      this.opt['reviewer_role'] = 'host';
     // console.log(this.$route)
    },
    methods: {
        doRefresh(){
          this.rateChanged = false;
          this.querPars = this.getQueryFormData();
          this.loadData();
        },
        queryRateChange(){
          this.rateChanged = true;
          this.loadData();
        },
        loadData(){
          this._submit();
        },
        doOpenChat(data){
          console.log("doOpenChat...");
          const pars = {};
          console.log(data);
          const related_chat_id = data.related_chat_id;
          ///chat/${key}?search=${item}
          const url = '/chat/all?search='+related_chat_id;
          this.$router.push({name:url, params: pars});
        },
        _submit(){
          const conditions = {
            filters : []
          };
          if(this.querPars.submitted !== null){
            if(this.querPars.submitted === false){
            //  conditions.filters.push({column: "reviewer_role", value: 'host'});
            }
            conditions.filters.push({column: "submitted", value: this.querPars.submitted});
          }
          //overall_rating
          if(this.querPars.overall_rating !== null && this.rateChanged){
            //conditions.filters.push({column: "reviewer_role", value: 'guest'});
            conditions.filters.push({column: "overall_rating", value: this.querPars.overall_rating});
          }

          if(this.querPars.order__checkout){
            conditions.filters.push({column: "order__checkout", value: this.querPars.order__checkout});
          }

          if(this.querPars.order__logical_room__physical_room__physical_room_id){
            conditions.filters.push({column: "order__logical_room__physical_room__physical_room_id", value: this.querPars.order__logical_room__physical_room__physical_room_id});
          }

          if(this.querPars.order__reservation_code){
            conditions.filters.push({column: "order__reservation_code", value: this.querPars.order__reservation_code});
          }
          if(conditions.filters.length == 0){
            conditions.filters.push({column: "reviewer_role", value: 'host'});
          }
          this.orderBy = "-id";
          this.submit(conditions,null,null);
        },
        getQueryFormData(){
          return {
            rateChanged: false,
            submitted: null,
            overall_rating: null,
            order__checkout: null,
            order__logical_room__physical_room__physical_room_id: null,
            order__reservation_code: null
          }
        },
        getInitFormData(_data){
          let _id = null;
          let _public_review = null; //公开评价
          let _private_feedback = null;  //私密评价
          let _category_ratings = null;  //子项目评分
          let _cleanliness = null;
          let _communication = null;
          let _respect_house_rules = null;
          let _is_reviewee_recommended = false;//房东是否推荐房客
          let _is_reviewee_recommendedTag = null;
          let _operator = null;
          if(_data){
            _id = _data.id;
            _category_ratings = _data.category_ratings_read_only;
            _operator = _data.operator;
          }
          return {
              id:_id,
              operator:_operator,
              public_review:_public_review, //公开评价
              private_feedback:_private_feedback,  //私密评价
              category_ratings:_category_ratings,  //子项目评分
              cleanliness:_cleanliness,
              communication:_communication,
              respect_house_rules:_respect_house_rules,
              is_reviewee_recommended:_is_reviewee_recommended,//房东是否推荐房客
              is_reviewee_recommendedTag:_is_reviewee_recommendedTag
          };
        },
        getInitRules() {
            const _this = this;
          //  const custRulesCfg = this.getCustRulesConfig();
            return {
                public_review: [
                    { required: true, message: 'What was it like to host this guest?', trigger: 'blur' },
                    { min: 1, max: 500, message: '1 to 500 characters in length', trigger: 'blur' }
                ],
                private_feedback: [
                    { required: true, message: 'Thank your guest for visiting or offer some tips to help them improve for their next trip.', trigger: 'blur' },
                    { min: 1, max: 500, message: '1 to 500 characters in length', trigger: 'blur' }
                ]
            };
        },
        rdoChange(value, ele){
          console.log(value);
          this.reviewsForm.is_reviewee_recommendedTag = value;
          this.reviewsForm.is_reviewee_recommended = (value == 'Yes');
          this.requiredRecomended = false;
        },
        rateChange(value, ele){
            console.log("rateChange.value="+value);
        },
        checkChange(value,ele,v3){
            console.log(ele);
         //   console.log("id="+$(ele).attr("pKid"));
            console.log(value);
        },
        displayImg(data){
            const related_photos = data.related_photos;
            if(!related_photos || related_photos.length == 0){
                return '/static/img/unkonwn.png';
            }
            if(!related_photos.photos || related_photos.photos.length == 0){
                return '/static/img/unkonwn.png';
            }
            //return '/static/img/unkonwn.png';
            return related_photos[0].photos[0];
        },
        /**
         * 打开评论弹窗
         * */
        doShowReview(data){
            console.log(data);
            this.doReset();
            this.reviewsVisible = true;

            const _orderData = data.related_order;
            const _related_photos = data.related_photos;

            let _hoursePic = "/static/img/unkonwn.png";
            let _platformPic = "";
            let _title = "----";
            let _guestName = "----";
            let _totalPrice = "0";
            let _currency = "";
            if(_related_photos &&_related_photos.length > 0 && _related_photos.photos && _related_photos.photos.length > 0){
              _hoursePic =  _related_photos.photos[0];
            }
            if(_orderData){
              _title = _orderData.room_title;
              _guestName = _orderData.guest_name;
              _totalPrice = _orderData.total_cost;
              _currency = _orderData.currency;
              switch (_orderData.platform) {
                case 'xiaozhu':{
                  _platformPic = '/static/img/xiaozhu.png';
                  break;
                }case 'airbnb':
                case 'airbnb_api':{
                  _platformPic = '/static/img/airbnb.jpg';
                  break;
                }default:{
                  _platformPic = '/static/img/unkonwn.png';
                }
              }
            }

            this.currentData = {
              hoursePic : _hoursePic,
              platformPic : _platformPic,
              guestName : _guestName,
              title : _title,
              totalPrice : _totalPrice,
              currency : _currency
            };
            this.reviewsForm = this.getInitFormData(data);
            console.log(this.reviewsForm);
        },
        doClose(){
          this.doReset();
          this.reviewsVisible = false;
        },
      /**
       * 提交回复表单
       */
      doReviewSubmit(){
          const _this = this;
          console.log("doReviewSubmit...");
          this.$refs['reviewsForm'].validate((valid) => {
            if (valid) {
              if(!_this.reviewsForm.is_reviewee_recommendedTag){
                this.requiredRecomended = true;
                return false;
              }
              this.requiredRecomended = false;
              _this.reviewsFormLoading = true;
              const _id = _this.reviewsForm.id;
              const {public_review,private_feedback,is_reviewee_recommended} = _this.reviewsForm;
              const operator = this.$store.state.user;
              const _reviewData = {public_review,private_feedback,is_reviewee_recommended,operator};
              updateModel(this.model, _id, _reviewData).then(res => {
                _this.reviewsFormLoading = false;
               _this.batchUpdateRatings();
              }).catch(reason => {
                _this.reviewsFormLoading = false;
                console.log("doSave Failure...");
                console.log(reason);
                _this.$message.error('Please Check Input Form Data Has Errors!');
              });

            }else{
              console.log('error submit!!');
              _this.$message.error('Please Check Input Form Data Has Errors!');
              return false;
            }
          });
       },
      batchUpdateRatings(){
        console.log("batchUpdateRatings...");
        const _this = this;
        let _datas = this.reviewsForm.category_ratings;
        _datas.forEach(item => {
          switch (item.category) {
            case 'cleanliness':
              item.rating = this.reviewsForm.cleanliness || 0;
              break;
            case 'communication':
              item.rating = this.reviewsForm.communication || 0;
              break;
            case 'respect_house_rules':
              item.rating = this.reviewsForm.respect_house_rules || 0;
              break;
          }
        });
        _this.reviewsFormLoading = true;
        updateModels('PhysicalRoomReviewsCategoryRating', _datas).then(res=>{
          _this.reviewsFormLoading = false;
          _this.$message({
            type: 'info',
            message: 'Save Data Success!'
          });
         this.doSubmitAction();
        }).catch(reason => {
          _this.reviewsFormLoading = false;
          console.log("doSave Failure...");
          console.log(reason);
          _this.$message.error('Please Check Input Form Data Has Errors!');
        });
      },
      doSubmitAction(){
        const _this = this;
        const _model = this.model;
        const _id = _this.reviewsForm.id;
        const _actionName = 'write_review_as_host';
        this.reviewsFormLoading = true;

        submitAction(_model, _id, _actionName)
          .then(res => {
            this.reviewsFormLoading = false;
            _this.$notify({
              title: 'Success',
              message: _model+':'+_id+' call API:'+_actionName+' succeeded !',
              type: 'success'
            });
            _this.doClose();
            _this.submit();
          }).catch(reason => {
            this.reviewsFormLoading = false;
            let errMsg = reason.data || reason.statusText;
            _this.$notify.error({
              title: 'Error',
              message: 'API:' + _actionName + '  call error ,Error Reason:[' + errMsg + ']',
              duration: 4000,
              onClose: () => {
                console.log("$notify.error.onClose");
                _this.doClose();
                _this.submit()
              }
            });
          });
      },
        /**
         * 重置表单
         */
        doReset(){
            this.reviewsForm = this.getInitFormData();
            if(this.$refs['reviewsForm']) this.$refs['reviewsForm'].resetFields();
        },
        /**
         * 打开评论弹窗
         * */
        doShowReply(data){
           if(data.reviewee_response != ''){
             this.$message.error('Reply completed to this review!');
              return;
           }
            this.doReplyReset();
            this.replyForm.id = data.id;
            this.replyVisible = true;
        },
        /**
         * 提交回复表单
         */
        doReplySubmit(){
            const _this = this;
            console.log("doReplySubmit...");
            this.$refs['replyForm'].validate((valid) => {
                if (valid) {
                    _this.replyFormLoading = true;
                    updateModel(this.model, _this.replyForm.id, _this.replyForm).then(res => {
                        _this.replyFormLoading = false;
                        _this.$message({
                            type: 'info',
                            message: 'Save Data Success!'
                        });
                        _this.doReplyClose();
                        _this.submit();
                    }).catch(reason => {
                        _this.replyFormLoading = false;
                        console.log("doSave Failure...");
                        console.log(reason);
                        _this.$message.error('Please Check Input Form Data Has Errors!');
                    });

                }else{
                    console.log('error submit!!');
                    _this.$message.error('Please Check Input Form Data Has Errors!');
                    return false;
                }
            });

        },
        /**
         * 关闭回复表单
         */
        doReplyClose(){
            console.log("doReplyClose...");
            this.doReplyReset();
            this.replyVisible = false;
        },
        /**
         * 重置表单
         */
        doReplyReset(){
            this.replyForm.reviewee_response = null;
            if(this.$refs['replyForm']) this.$refs['replyForm'].resetFields();
        },
    }
  }
</script>

<style scoped>

  .col-site{
    margin-top: 20%;
  }
  .col-site img{
    width:32px;height: 32px;border: none;
  }

  .el_check_cls{
    margin: 10px 8px;
  }

  .col-status-button{
    text-align: center;width: 90px;height:50px;padding: 5px 10px;
  }

  .col-status-desc{
    text-align: center;margin-top: 5px;font-size: 13px;
  }

  .col-status-no{
    font-size: 28px;color: red;
  }
  .col-status-yes{
    font-size: 28px;color: #61B259;
  }

  .col-attribution{
      padding: 0px;
      /*background-color: #00c292;*/
  }


  .col-attribution img{
      max-width:140px;
      max-height: 85px;
  }

  .attribution-pid{
    color:#F4AD48;
    font-size: 16px;
    font-weight: bold;
  }

  .attribution-reservation-code{
    color:#7F8BD1;
    font-size: 16px;
    font-weight: bold;
  }

  .reviewee-response{
      display: block;
      font-size: 12px;
      margin: 5px 20px;
      padding: 5px 10px;
      background-color: white;
      border: 1px dashed burlywood;
      border-radius:10px;
      text-align: right;
  }
  .reviewee-response span{
    display: inline-block;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    /* margin: 10px 0 10px 0; */
    white-space: normal;
    -webkit-line-clamp:2;
  }

  .reviewee-response strong{

  }

  .col-review{
    margin-top: -10px;width: 520px; font-size: 16px;
  }

  .col-review div{
    width: 100%;position: relative; padding:30px 10px 5px 10px;
  }

  .col-review strong{
    padding: 0px;width: 100%; white-space: normal;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    /* margin: 10px 0 10px 0; */
    -webkit-line-clamp:3;
  }

  .col-review h5{
    font-weight: bold;
    position: absolute;
  }

  .col-review a{
    font-size: 14px;
  }

  .review-reply{
    position: absolute; top:5px;right: 10px;
  }

  .review-role {
    padding: 0px;width: 100%; white-space: normal;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    /* margin: 10px 0 10px 0; */
    font-size: 15px;
    -webkit-line-clamp:3;
  }
  /**------- 创建评价窗口 CODE START ------**/
  .dilog-cls{
    background-color: #F5F5F5;
  }

  .order-info{
    width: 216px;
    border: 1px solid #E6E6E6;
    background-color: white;
  }

  /* H:145 W:215*/
  .order-info-house{
    height: 145px;
    width: 215px;
    border: none;
  }

  .order-info-row{
    background-color: white;
    height: 60px;
    padding: 5px 5px;
  }

  .order-info-col1{
    float: left;
    width: 25%;
  }

  .order-info-col2{
    float: left;
    width: 75%;
    padding-left: 5px;
  }
  .order-info-platform{
    height: 50px;
    width: 50px;
    border-radius:50%;
    margin-top: 3px;
    border: none;
  }

  .order-info-title{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 12px;
    margin-top: 5px;
  }

  .order-info-price{
    font-size: 13px;
    margin-top: 5px;
  }

  .order-info-price .guest-name{
    float: left;
  }

  .order-info-price .total-price{
    float: right;
    color: #ff6633;
    padding-right: 5px;
  }

  .total-price label{
    margin-left: 2px;
    font-size: 10px;
  }

  .requireded{
    color:red;
  }
  /**------- 创建评价窗口 CODE END ------**/
</style>
